{% extends "base.html" %}
{% block content %}
<div class="header">
  <a href="/"> Back to Index </a>
</div>
<div class="detail">
  <form method="post" action="update/">
  <div class="text">
    <label for="title">Title</label>
    <input type="text" name="title" id="title" value="{{ object.title }}">
    <label for="slug">Slug</label>
    <input type="text" name="slug" id="slug" value="{{ object.slug }}">
  </div>
  <textarea name="text" id="text">{{ object.text }}</textarea>
  <input class="submit" type="submit" value="update note">
  </form>
</div>


<script>
  $(document).ready(function() {
    var title_to_input = function() {
      var title = $("#title");
      var input = $('<input type="text" name="title" id="title" value="'+title.text()+'">');
      input.hover(function() {}, title_to_span);
      title.replaceWith(input);
    }
    var title_to_span = function() {
      // called on mouse away
      var title = $("#title");
      var span = $('<span id="title"><em>'+title.val()+'</em></span>');
      span.hover(title_to_input,function() {});
      title.replaceWith(span);
    }
      title_to_span();
	  slug_to_span();
  });
</script>

{% endblock %}
